<div nz-row>
  <div nz-col nzSpan="24">
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="3">时间范围：</div>
      <div nz-col nzSpan="15">
        <nz-range-picker [(ngModel)]="queryDate" [nzRanges]="ranges" nzShowTime
                         nzFormat="yyyy/MM/dd HH:mm:ss"></nz-range-picker>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="3">标签规则：</div>
      <div nz-col nzSpan="15">
        <nz-select style="width: 200px;" nzShowSearch nzServerSearch nzPlaceHolder="规则" [nzShowArrow]="false"
                   [(ngModel)]="selectRule" [nzFilterOption]="nzFilterOption"
                   (nzOnSearch)="onRuleSerach()">
          <nz-option *ngFor="let ruleVO of ruleVOS" [nzLabel]="ruleVO.name" [nzValue]="ruleVO">
          </nz-option>
        </nz-select>
      </div>
    </div> 
    <div nz-row>
      <div nz-col nzSpan="12">
        <button nz-button nzBlock="true" nzType="primary" nzBlock (click)='onSearch()'>查询</button>
      </div>
    </div>
  </div>
</div>
<nz-divider nzText=""></nz-divider>
<div nz-row>
  <div nz-col nzSpan="24">
    <nz-table #nestedTable [nzData]="rulePointVOs" [nzPageSize]="10">
      <thead>
        <tr>
          <th></th>
          <th style="width:30%">事件时间</th>          
          <th style="width:50%">统计窗口</th>
          <th>命中数</th>
        </tr>
      </thead>
      <tbody>
        <ng-template ngFor let-data [ngForOf]="nestedTable.data">
          <tr>
            <td [(nzExpand)]="data.expand"></td>
            <td>{{data.eventTime | date: "yyyy-MM-dd HH:mm:ss"}}</td>
            <td>{{data.startTime | date: "yyyy-MM-dd HH:mm:ss"}} - {{data.endTime | date: "yyyy-MM-dd HH:mm:ss"}}</td>
            <td>{{data.hitNumber}}</td>
          </tr>
          <tr [nzExpand]="data.expand">
            <nz-table #innerTable [nzData]="data.resultVOS" nzSize="middle" [nzShowPagination]="false">
              <thead>
                <tr>
                  <th style="width:80%">标签</th>
                  <th style="width:20%">指标值</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let data of innerTable.data">
                  <td>{{ data.tags | json }}</td>
                  <td>{{ data.metricValues | json }}</td>  
                </tr>
              </tbody>
            </nz-table>
          </tr>
        </ng-template>
      </tbody>
    </nz-table>
  </div>
</div>
